<template>
  <super-table
    :key="superTableKey"
    :column="column"
    v-model="tableData"
    @hook:destroyed="destoryedComponentHandler"
    v-bind="$attrs"
  >
    <template #action="{ scope }">
      <template v-if="scope.column.scopedSlots === 'action'">
        <el-button type="text" @click="supertableRowClick(scope.row)"
          >详情</el-button
        >
      </template>
    </template>
  </super-table>
</template>

<script setup>
import { ref } from "vue";
import superTable from "../components/super-table.vue";

const tableData = ref([
  {
    id: "1",
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);
const column = ref([
  {
    title: "id",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "date",
    dataIndex: "date",
    width: 300,
  },
  {
    title: "name",
    dataIndex: "name",
    key: "name",
    width: 300,
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    width: 300,
  },
  {
    title: "action",
    dataIndex: "action",
    key: "action",
    width: 300,
    scopedSlots: "action",
  },
]);

for (let i = 0; i < 9999; i++) {
  tableData.value.push({
    id: i,
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  });
}

function supertableRowClick(e) {
  console.log("e :>> ", e);
}

</script>

<style>
</style>